<template>
  <div class="mobile-page">
    <h1>This is Mobile Page</h1>
    <div class="layout-style">
      <div class="walk-school"></div>
    </div>
    <div class="stop-animation">
      <button class="btn-style" @click="stopScheduler">
        <span>Stop Animation</span>
      </button>
      <div>
        <div v-for="val in list">{{ val }}</div>
      </div>
    </div>
    <div class="cached-style">
      <view-cached :includes="['cached', 'normal']">
        <component :is="currentView"></component>
      </view-cached>
      <div class="walk-options">
        <span>current: {{ current }}</span>
        <span @click="toggleValue('cached')">cached</span>
        <span @click="toggleValue('normal')">normal</span>
        <span @click="toggleValue('reflush')">reflush</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as API from "@/https/index.js";
import ViewCached, { cached, normal, reflush } from "@/views/cached";
const dicts = new Map([
  ["cached", cached],
  ["normal", normal],
  ["reflush", reflush],
]);

export default {
  components: {
    cached,
    normal,
    reflush,
    ViewCached,
  },
  data() {
    return {
      current: 'cached',
      list: [],
      currentView: cached,
    };
  },
  mounted() {
    this.loadMockState();    
  },
  methods: {
    loadMockState() {
      API.verifyAuth().then((r) => {
        console.log(r.data);
      });
      API.login().then((r) => {
        console.log(r);
      });
      API.getUserInfo().then((r) => {
        console.log(r);
      });
    },
    stopScheduler() {
      this.list = Array.from({ length: 5 }, (v, i) => i);
      // https://gitee.com/frontend_site/uni.normal.com.git
      // commit 02d3e360b632665100117141620586522c93fba2
      // 对比验证 小程序的架构模型有别与传统web单线程架构，小程序为双线程架构
      const start = performance.now();
      while (performance.now() - start < 10000) {}
    },
    toggleValue(value) {
      this.current = value;
      this.currentView = dicts.get(value);
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile-page {
  color: $color-primary;
}

.stop-animation {
  line-height: 48px;
}

.btn-style {
  width: 120px;
  line-height: 28px;
}

.walk-school {
  background-color: coral;
  width: 30px;
  height: 30px;
  animation: 3s slide-margin linear infinite;
}

@keyframes slide-margin {
  from {
    margin-left: 0;
  }
  50% {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}

.layout-style {
  display: flex;
  height: 80px;
  align-items: center;
}

.walk-options {
  display: flex;
  gap: 20px;
  margin-top: 20px;

  span {
    cursor: pointer;
  }
}
</style>
